<template>
  <view v-if="iv" class="container">
    <view class="title">关联注册</view> <!-- 加粗标题 -->
    <view class="input-group">
      <view class="input-box">
        <input type="text" placeholder="请输入电话" v-model="phoneNumber" />
      </view>
    </view>
    <view class="input-group half-width">
      <view class="input-box half-width-input">
        <input type="text" placeholder="请输入验证码" v-model="inputCaptcha" />
      </view>
      <button
        class="captcha-button half-width-captcha"
        :disabled="isCaptchaButtonDisabled"
        @click="sendCaptcha"
      >
        {{ isCaptchaButtonDisabled ? `重新发送(${countdown}s)` : "发送验证码" }}
      </button>
    </view>
    <button class="login-button" type="primary" @click="login">
      绑定
    </button>
    <view class="register-link">
      首次登录，需要电话；若未注册，则自动注册账号
    </view>
  </view>
</template>


<script>
// 引入 API
import { VerificationCodeAPI } from '../../services/api.js';  // 根据实际路径引入
import { OrderAPI } from '../../services/api.js'; // 引入 OrderAPI

export default {
  data() {
    return {
      phoneNumber: "", // 用户手机号
      inputCaptcha: "", // 用户输入的验证码
      captcha: "", // 后端生成的验证码
      isCaptchaButtonDisabled: false, // 验证码按钮是否禁用
      countdown: 0, // 倒计时的秒数
      openid: "", // 存储从前一页面传来的 openid
      iv: false, 
    };
  },
  async mounted(){
	  this.iv=await OrderAPI.fetchOrderData();
  },
  onLoad(options) {
    // 获取通过 URL 参数传递过来的 openid
    if (options.openid) {
      this.openid = options.openid;
    }
  },
  methods: {
    // 发送验证码
    async sendCaptcha() {
      if (!this.phoneNumber) {
        uni.showToast({ title: "请输入手机号", icon: "none" });
        return;
      }

      try {
        // 调用后端 API 创建验证码，传递 openid
        const res = await VerificationCodeAPI.createCode(this.phoneNumber, this.openid);
        console.log(res);
        if (res.message === "Verification code sent and saved successfully") {
          uni.showToast({
            title: `验证码已发送到手机号 ${this.phoneNumber}`,
            icon: "none",
          });
          this.startCountdown(60); // 开始 60 秒倒计时
        } else {
          uni.showToast({ title: res.data.message, icon: "none" });
        }
      } catch (error) {
        uni.showToast({
          title: "发送验证码失败，请稍后重试",
          icon: "none",
        });
        console.error("发送验证码失败", error);
      }
    },

    // 登录并验证验证码
    async login() {
      if (!this.phoneNumber) {
        uni.showToast({ title: "请输入手机号", icon: "none" });
        return;
      }

      try {
        // 传递 openid 以及验证码进行登录验证
        const res = await VerificationCodeAPI.verifyCode({
          phoneNumber: this.phoneNumber,
          code: this.inputCaptcha,
          openid: this.openid, // 将 openid 传递给后端
        });

        console.log(res.message);
        if (res.message === "Login successful") {
          const sessionValue = res.user.sessionValue;
          uni.setStorageSync("sessionValue", sessionValue);

          uni.showToast({ title: "登录成功", icon: "success" });
          uni.switchTab({
            url: "/pages/mainPage/pinMain",
          });
        } else {
          uni.showToast({ title: res.message, icon: "none" });
        }
      } catch (error) {
        uni.showToast({ title: "登录失败，请稍后重试", icon: "none" });
        console.error("登录错误:", error);
      }
    },
	// 倒计时逻辑
	startCountdown(seconds) {
	  this.countdown = seconds;
	  this.isCaptchaButtonDisabled = true;
	
	  const interval = setInterval(() => {
	    this.countdown--;
	    if (this.countdown <= 0) {
	      clearInterval(interval);
	      this.isCaptchaButtonDisabled = false;
	    }
	  }, 1000); // 每秒更新一次
	},
  },
};

</script>


<style scoped>
.container {
  padding: 20px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.title {
  font-size: 28px; /* 调整标题的字体大小 */
  font-weight: bold; /* 加粗标题 */
  color: #333;
  margin-bottom: 20px;
}

.input-group {
  margin-bottom: 15px;
  width: 100%;
}

.input-box {
  display: flex;
  align-items: center;
  border: 2px solid #000; /* 黑色边框 */
  border-radius: 10px; /* 圆滑的角 */
  padding: 10px;
  box-sizing: border-box; /* 确保padding不会增加元素的实际高度 */
}

input {
  flex: 1;
  border: none; /* 去掉默认边框 */
  outline: none; /* 去掉输入框的聚焦边框 */
  height: 44px; /* 保证输入框高度 */
  font-size: 20px; /* 增加字体大小 */
  box-sizing: border-box; /* 确保padding不会增加元素的实际高度 */
}

.half-width {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.half-width-input {
  width: 48%; /* 占据一半宽度 */
}

.captcha-button {
  width: 48%; /* 占据一半宽度 */
  background-color: black; /* 设置为黑色背景 */
  color: white; /* 字体颜色设置为白色 */
  font-size: 18px; /* 调整字体大小 */
  font-weight: bold;
  border: 2px solid #000;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  height: 70px; /* 保证按钮与输入框高度一致 */
  padding: 0; /* 清除按钮的padding，确保高度对齐 */
  box-sizing: border-box; /* 确保padding不会增加按钮高度 */
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 44px; /* 确保文本垂直居中 */
}

.login-button {
  width: 80%; /* 缩窄按钮 */
  background-color: #000; /* 设置为黑色背景 */
  color: #fff; /* 字体颜色设置为白色 */
  font-size: 22px; /* 增大字体 */
  font-weight: bold;
  padding: 8px;
  border: none;
  border-radius: 10px;
  margin-top: 15px;
  cursor: pointer;
}

.register-link {
  margin-top: 15px;
  text-align: center;
  color: #666;
  font-size: 14px;
}

.register-text {
  color: #333;
  font-weight: bold;
  text-decoration: underline;
}
</style>
